<template>
	<view>
		<u-navbar class="custom-header" back-text="返回" title="销售出库" height="44" :custom-back="backToList">
			<view slot="right"><u-button type="primary" size="mini" style="margin-right: 20rpx;" @click="handleSave">保存</u-button></view>
		</u-navbar>
		<view class="text">销售出库单基本信息</view>
		<uni-card>
			<u-form labelPosition="left" :model="form" ref="uForm" label-width="200rpx">
				<u-form-item label="出库单编号:" prop="salseCode" borderBottom>
					<u-input v-model="form.salseCode" placeholder="保存后系统自动生成" :border="border"></u-input>
					<u-switch v-model="checked" @change="changeStatus"></u-switch>
				</u-form-item>
				<u-form-item label="出库单名称:" prop="salseName" borderBottom>
					<u-input v-model="form.salseName" placeholder="请输入出库单名称" :border="border"></u-input>
				</u-form-item>
				<u-form-item label="出货检验单:" prop="oqcCode" borderBottom>
					<u-input v-model="form.oqcCode" placeholder="请选择出货检验单" :border="border" type="select" @click="show1 = true"></u-input>
					<u-select v-model="show1" :list="checkList" value-name="oqcId" label-name="oqcCode" @confirm="confirm1"></u-select>
				</u-form-item>
				<u-form-item label="销售订单编号:" prop="poCode" borderBottom>
					<u-input v-model="form.poCode" placeholder="请输入销售订单编号" :border="border"></u-input>
				</u-form-item>
				<u-form-item label="客户名称:" prop="clientName" borderBottom>
					<u-input v-model="form.clientName" placeholder="请选择客户" :border="border" type="select" @click="show3 = true"></u-input>
					<u-select v-model="show3" :list="clientList" value-name="clientCode" label-name="clientName" @confirm="confirm3"></u-select>
				</u-form-item>
				<u-form-item label="客户编码:" prop="clientCode" borderBottom><u-input v-model="form.clientCode" placeholder="" :border="border"></u-input></u-form-item>
				<u-form-item label="出库日期:" prop="salseDate" borderBottom>
					<u-input v-model="form.salseDate" placeholder="请选择日期" :border="border" type="select" @click="show2 = true"></u-input>
					<u-picker v-model="show2" mode="time" :params="params" @confirm="confirm2"></u-picker>
				</u-form-item>
			</u-form>
		</uni-card>
		<view v-if="salseId != null">
			<u-gap height="20" bg-color="#dedede"></u-gap>
			<view class="text">销售出库单明细信息</view>
			<u-row gutter="32" justify="center">
				<u-col span="10">
					<view><u-button type="success" @click="handleAdd(salseId)">新增</u-button></view>
				</u-col>
			</u-row>
			<uni-list>
				<uni-list-item v-for="(workReport, index) in workList" :key="index">
					<template slot="body">
						<uni-card is-full class="uni-list-card" padding="0" spacing="0">
							<view class="list-item-content">
								<view class="list-item-body">
									<view class="item-label">物料编码：</view>
									<view class="u-line-1 item-value">{{ workReport.itemCode }}</view>
								</view>
								<view class="list-item-body">
									<view class="item-label">物料编码：</view>
									<view class="u-line-1 item-value">{{ workReport.itemName }}</view>
								</view>
								<view class="list-item-body">
									<view class="item-label">单位：</view>
									<view class="u-line-1 item-value">{{ workReport.unitOfMeasure }}</view>
								</view>
								<view class="list-item-body">
									<view class="item-label">入库位置：</view>
									<view class="u-line-1 item-value">{{ workReport.warehouseName + '-' + workReport.locationName + '-' + workReport.areaName }}</view>
								</view>
								<view class="list-item-body">
									<view class="item-label">入库数量：</view>
									<view class="u-line-1 item-value">{{ workReport.quantityRecived }}</view>
								</view>
								<view class="flex-botton">
									<u-button class="btn btn1" type="primary" size="mini" @click="handleUpdate(workReport)">修改</u-button>
									<u-button class="btn" type="primary" size="mini" @click="handleDelete()">删除</u-button>
								</view>
							</view>
						</uni-card>
					</template>
				</uni-list-item>
			</uni-list>
			<!-- <u-row gutter="32" class="bottom-box" justify="center">
				<u-col span="10">
					<view><u-button type="primary" shape="circle" @click="navTo('/pages/sys/home/index')">提交</u-button></view>
				</u-col>
			</u-row> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				salseId: null,
				salseCode: null,
				salseName: null,
				oqcId: null,
				oqcCode: null,
				soCode: null,
				clientId: 200,
				clientCode: null,
				clientName: null,
				clientNick: null,
				warehouseId: null,
				warehouseCode: null,
				warehouseName: null,
				locationId: null,
				locationCode: null,
				locationName: null,
				areaId: null,
				areaCode: null,
				areaName: null,
				salseDate: null,
				status: 'PREPARE',
				remark: null,
				attr1: null,
				attr2: null,
				attr3: null,
				attr4: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null
			},
			// 表单验证
			rules: {
				salseCode: [
					{
						required: true,
						message: '请输入出库单编号',
						trigger: ['change', 'blur']
					}
				],
				salseName: [
					{
						required: true,
						message: '请输入出库单名称',
						trigger: ['change', 'blur']
					}
				],
				recptDate: [
					{
						required: true,
						message: '请选择出库单日期',
						trigger: ['change', 'blur']
					}
				]
			},
			border: false,
			show1: false,
			show2: false,
			show3: false,
			checked: true,
			checkList: [], //出货检验单列表
			clientList: [], //客户列表
			//时间选择器参数
			params: {
				year: true,
				month: true,
				day: true
			},
			salseId: null, //入库单ID
			lineId: null, //入库单明细ID
			workList: [], //入库单明细列表
			content: '是否确认删除该入库单？'
		};
	},
	onLoad(options) {
		//判断是否修改
		if (options.params != undefined) {
			this.salseId = options.params;
			this.getList();
		}
		this.getCheck();
		this.getClient();
		this.changeStatus(true);
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		//开关触发事件
		changeStatus(status) {
			console.log(status);
			if (status == true) {
				this.$u.api.getAutoCode({ ruleCode: 'PRODUCTSALSE_CODE' }).then(res => {
					console.log(res);
					this.form.salseCode = res;
				});
			} else {
				this.form.salseCode = null;
			}
		},
		getList() {
			const salseId = this.salseId;
			this.$u.api.saleReturn
				.getSaleReturnDetail({ salseId })
				.then(res => {
					this.form = res.data;
				})
				.catch(err => {
					console.log(err);
				});
			this.$u.api.saleReturn
				.getSaleReturnDetailLine({ salseId })
				.then(res => {
					this.workList = res.rows;
				})
				.catch(err => {
					console.log(err);
				});
		},
		handleSave() {
			console.log('salseId:', this.salseId);
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if (this.salseId == null) {
						this.$u.api.saleReturn
							.handleSaleReturnAdd(this.form)
							.then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '新增成功',
										duration: 1000
									});
									this.backToList();
								}
							})
							.catch(err => {
								console.log(err);
							});
					} else {
						this.$u.api.saleReturn
							.handleSaleReturnUpdata(this.form)
							.then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '修改成功',
										duration: 1000
									});
									this.backToList();
								}
							})
							.catch(err => {
								console.log(err);
							});
					}
				} else {
					console.log('验证失败');
				}
			});
		},
		// 获取检验单
		getCheck() {
			this.$u.api.check.getCheckList().then(res => {
				console.log(res);
				this.checkList = res.rows;
			});
		},
		//检验单选择
		confirm1(e) {
			console.log(e);
			this.form.vendorName = e[0].label;
			this.form.vendorId = e[0].value;
		},
		// 获取客户
		getClient() {
			this.$u.api.client.getClientList().then(res => {
				console.log(res);
				this.clientList = res.rows;
			});
		},
		//客户选择
		confirm3(e) {
			console.log(e);
			this.form.clientName = e[0].label;
			this.form.clientCode = e[0].value;
		},
		//时间选择
		confirm2(e) {
			console.log(e);
			this.form.salseDate = e.year + '-' + e.month + '-' + e.day;
		},
		// 新增
		handleAdd(data) {
			uni.navigateTo({
				url: '/pages/sys/home/components/work_bench/sale-return/sale_return_add'
			});
			let id = data;
			uni.setStorageSync('salseId', id);
		},
		//修改
		handleUpdate(row) {
			const ID = {
				salseId: row.salseId,
				lineId: row.lineId
			};
			uni.navigateTo({
				url: '/pages/sys/home/components/work_bench/sale-return/sale_return_add?params=' + JSON.stringify(ID)
			});
		},
		//删除
		handleDelete(val) {
			uni.showModal({
				title: '提示',
				content: '是否确认删除',
				success: res => {
					if (res.confirm) {
						console.log('用户点击确定');
						this.$u.api.saleReturn
							.handleSaleReturnDeleteLine({ lineIds: val.lineId })
							.then(res => {
								if (res.code === 200)
									uni.showToast({
										title: '删除成功',
										duration: 1000,
										icon: 'none'
									});
								this.getList();
							})
							.catch(err => {
								console.log(err);
							});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//返回列表
		backToList() {
			uni.navigateTo({
				url: '/pages/sys/home/components/work_bench/sale-return/sale_return_list'
			});
		}
	}
};
</script>

<style scoped lang="scss">
.text {
	font-weight: bold;
	text-align: center;
	margin: 20rpx 0;
}
.item-card-title-layout {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin: 0 20rpx;
	padding: 20rpx 0;
	border-bottom: 1px solid rgb(214, 215, 217);

	.item-card-title {
		font-size: 32rpx;
		color: #5a5a5a;
	}

	.item-card-status {
		padding: 5rpx 8rpx;
		font-size: 26rpx;
		color: #fff;

		&.status-1 {
			background-color: #9a9998;
		}

		&.status-2 {
			background-color: #f9ae3d;
		}

		&.status-3 {
			background-color: #3c9cff;
		}

		&.status-4 {
			background-color: #5ac725;
		}
		&.status-5 {
			background-color: #f56c6c;
		}
	}
}

.list-item-content {
	padding: 20rpx;
	border-bottom: 1px solid rgb(214, 215, 217);

	.list-item-body {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		line-height: 56rpx;

		.item-label,
		.item-value {
			color: #6a6a6a;
			font-size: 28rpx;
		}
	}
}
.card-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	.card-actions-item {
		font-size: 25rpx;
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		&.withdraw {
			color: #f56c6c;
		}
		&.division {
			border-right: 1px solid rgb(214, 215, 217);
		}
	}
}
.flex-botton {
	display: flex;
	justify-content: flex-end;
}
.btn {
	margin: 0;
}
.btn1 {
	margin-right: 20rpx;
}
</style>
